<template>
    <div class="home">
        <el-button type="success" @click="cli(1)">+添加</el-button>
        <div style="height: 650px; overflow-y: auto;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop=" username" label="名称" align="center">
                </el-table-column>
                <el-table-column prop="profile" label="说明" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div>
                            <!-- {{ scope.row }} -->
                            <span @click="cli(scope.row)" style="color: yellowgreen; margin:4px;">编辑</span>
                            <span @click="del(scope.row)">删除</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { tableData,roleList,save } from "@/api/role.js"
export default {
    data() {
        return {
            title:"",
            dialogFormVisible: false,
            form: {
                username: '',
                profile: '',
                roleIds:[]
            },
            rules: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                profile:[
                    {required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            params: { page: 1, pageSize: 10 },
            currentPage: 1,
            total: 10,
            pageSize: 10,
            tableData: [],
            list: [],
        }
    },
    mounted() {
        this.getRoleList(),
        this.getList()
    },
    methods: {
    async getRoleList() {
            let { data: res } = await roleList()
            this.roleLists=res;
            this.roleLists.forEach(r=>r.flag=false)
        },
    methods: {
        async getList() {
            let { data: res } = await tableData()
            this.tableData = res
            this.total = this.tableData.length
            console.log(JSON.stringify(this.tableData))
            this.tableData = this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
            console.log(res);
        },
        del(row) {
            console.log(row)
        },
        async saveEdit(params){
            let data=await save(params)
            console.log(data);
            if(data.msg=="success"){
                this.$message({
                    message:'成功',
                    type:'success',
                    duration:1000
                });
                this.dialogFormVisible=false
            }else{
                this.$message({
                    message:data.msg,
                    type:'error',
                    duration:1000
                });
            }
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form);
            console.log(this.roleLists);
            this.form.roleIds=this.roleLists.filter(r=>r.flag).map(r=>r.id)
            console.log(this.form);
            this.saveEdit(this.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
        cli(val) {
            console.log(val);
            if (val == 1) {
                this.title = "添加",
                    this.form = {
                        username: '',
                        pwd: '',
                        realname: '',
                        mobile: '',
                        id: '',
                        roleIds: []
                    },
                    this.roleLists.forEach(r => r.flag = false)
            } else {
                this.title = "编辑"
                this.form.username = val.username
                this.form.pwd = val.pwd
                this.form.realname = val.realname
                this.form.mobile = val.mobile
                this.form.id = val.id
            }
            this.dialogFormVisible = true
            this.$router.push("/TianJia")
        },
        edit(row) {
            console.log(row);
        }, handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.tableData = this.list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
    }
    }
}
</script>
